<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8" />
    <title>Checkbox - Basic</title>
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
    />
    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
    <script src="../../../../../scripts/testing/scripts.js"></script>
    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
  </head>
  <style>
    ion-checkbox.checkbox-part::part(mark) {
      transform: scale(0.5);
      transform-origin: center;
    }
  </style>
  <body>
    <ion-app>
      <ion-header>
        <ion-toolbar>
          <ion-title>Checkbox - Basic</ion-title>
        </ion-toolbar>
      </ion-header>

      <ion-content id="content">
        <ion-item onClick="clickItem()">
          <ion-label>Clickable Item</ion-label>
          <ion-checkbox></ion-checkbox>
        </ion-item>

        <ion-item>
          <ion-label>Default</ion-label>
          <ion-checkbox checked></ion-checkbox>
        </ion-item>

        <ion-item>
          <ion-label>Primary</ion-label>
          <ion-checkbox checked color="primary" slot="end"></ion-checkbox>
        </ion-item>

        <ion-item>
          <ion-label>Secondary</ion-label>
          <ion-checkbox disabled checked color="secondary"></ion-checkbox>
        </ion-item>

        <ion-item>
          <ion-label>Tertiary</ion-label>
          <ion-checkbox checked color="tertiary"></ion-checkbox>
        </ion-item>

        <ion-item>
          <ion-label>Success</ion-label>
          <ion-checkbox checked color="success"></ion-checkbox>
        </ion-item>

        <ion-item>
          <ion-label>Warning</ion-label>
          <ion-checkbox checked color="warning"></ion-checkbox>
        </ion-item>

        <ion-item>
          <ion-label>Dark</ion-label>
          <ion-checkbox checked color="dark" style="--size: 100px"></ion-checkbox>
        </ion-item>

        <ion-item>
          <ion-label>Danger</ion-label>
          <ion-checkbox checked color="danger" slot="start"></ion-checkbox>
        </ion-item>

        <ion-item>
          <ion-label>Light</ion-label>
          <ion-checkbox checked color="light" slot="start"></ion-checkbox>
        </ion-item>

        <ion-item>
          <ion-label>Medium</ion-label>
          <ion-checkbox checked color="medium" slot="start"></ion-checkbox>
        </ion-item>

        <ion-item>
          <ion-label>Dark</ion-label>
          <ion-checkbox checked color="dark" slot="start" style="--size: 100px"></ion-checkbox>
        </ion-item>

        <ion-item>
          <ion-label>Checkmark width</ion-label>
          <ion-checkbox checked color="dark" slot="start" style="--checkmark-width: 7"></ion-checkbox>
        </ion-item>

        <ion-item>
          <ion-label>Checkmark ::part</ion-label>
          <ion-checkbox checked color="dark" slot="start" class="checkbox-part"></ion-checkbox>
        </ion-item>

        <ion-item>
          <ion-label>Unchecked by Default</ion-label>
          <ion-checkbox></ion-checkbox>
        </ion-item>

        <ion-item>
          <ion-label>Disabled</ion-label>
          <ion-checkbox disabled></ion-checkbox>
        </ion-item>
      </ion-content>
    </ion-app>

    <script>
      const inputs = document.querySelectorAll('ion-checkbox');

      for (var i = 0; i < inputs.length; i++) {
        const input = inputs[i];

        input.addEventListener('ionBlur', function () {
          console.log('Listen ionBlur: fired');
        });

        input.addEventListener('ionFocus', function () {
          console.log('Listen ionFocus: fired');
        });

        input.addEventListener('ionChange', function (ev) {
          console.log('Listen ionChange: fired', ev.detail);
        });

        input.addEventListener('click', function () {
          console.log('Listen click: fired');
        });
      }

      const clickItem = () => {
        console.log('Item click: fired');
      };
    </script>
  </body>
</html>
